<template>
  <div class="banner-container">
    <el-card class="card-left" shadow="never">
      <el-upload
        ref="upload"
        action="http://localhost:9999/banner/upload"
        :before-upload="beforeUpload"
        :auto-upload="false"
        :on-success="onSuccess"
        name="file"
        :limit="1"
        :on-exceed="onExceed"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        >
        <div slot="tip" class="el-upload__tip">
          资金有限，上传图片不能超过2MB
        </div>
      </el-upload>
    </el-card>
    <el-card class="card-right" shadow="never">
      <el-table
        border
        v-loading="loading"
        stripe
        style="width: 100%"
        :data="table"
      >
        <el-table-column prop="url" align="center" label="图片">
          <template slot-scope="scope">
            <el-image
              style="width: 240px; height: 70px"
              :src="scope.row.url"
              fit="cover"
              @click="lookClick(scope.row.url)"
            >
              ></el-image
            >
          </template>
        </el-table-column>
        <el-table-column label="上传时间">
          <template slot-scope="scope">
            {{ formatDate(1, scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              @click="lookClick(scope.row.url)"
              type="text"
              size="small"
              style="margin-right: 0.3rem"
              >查看</el-button
            >
            <el-popconfirm
              @onConfirm="deleteClick(scope.row.id)"
              title="确定删除该轮播图吗？"
            >
              <template #reference>
                <el-button style="color: red" type="text" size="small"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div> -->
    </el-card>
    <el-dialog
      top="20px"
      title="图片预览"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <el-image
        :src="previewUrl"
        fit="contain"
        style="width: 100%; height: 600px"
      ></el-image>
    </el-dialog>
  </div>
</template>

<script>
import { list,del } from "@/api/banner";
export default {
  data() {
    return {
      table: [],
      loading: false,
      dialogVisible: false,
      previewUrl: "",

      // page: 1,
      // pageSize: 5,
      // total: 0,
    };
  },
  async mounted() {
    await this.getBannerList();
  },
  methods: {
    // 查看轮播图
    lookClick(url) {
      this.previewUrl = url;
      this.dialogVisible = true;
    },
    // 删除轮播图
    async deleteClick(id) {
      const res = await del(id);
      this.$message.success(res.message);
      this.getBannerList();
    },
    // 处理分页逻辑
    // handleCurrentChange(payload) {
    //   this.page = payload;
    //   this.getBannerList();
    // },
    // 获取轮播图列表
    async getBannerList() {
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        url:"111"
      }
      this.loading = true;
      const res = await list();
      this.table = res.data;
      // this.total = res.data.total;
      this.loading = false;
    },
    // 上传轮播图
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 上传文件数量超过限制
    onExceed(files) {
      files && this.$message.error("单次只能上传一张图片");
    },
    // 上传文件大小超出限制
    beforeUpload(file) {
      const max_size = file.size / 1024 / 1024 < 2;
      if (!max_size) {
        this.$message.error("上传图片不能超过2MB");
        return false;
      }
      return true;
    },
    // 上传成功
    onSuccess(response) {
      this.$refs.upload.clearFiles();
      if (response.code === 200) {
        this.$message.success("上传成功");
        this.getBannerList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.banner-container {
  display: flex;
  gap: 15px;
  .card-left {
    width: 30%;
    height: 100%;
  }
  .card-right {
    flex: 1;
    height: 100%;
  }
}
.page {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
</style>
